<template>
  <div class="tenementAdmin">
    <el-container>
      <el-main>
        <el-card shadow="never" class="selectCard">
          <el-form label-position="right" label-width="6rem">
            <el-row :gutter="40">
              <el-col :span="10">
                <el-form-item label="租户名称">
                  <el-input v-model="tenementName" />
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="联系人">
                  <el-input v-model="tenementName" />
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="经营类目">
                  <el-input v-model="tenementName" />
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="账号期限">
                  <el-date-picker
                    v-model="accoutDate"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="账号状态">
                  <el-select v-model="accountType">
                    <el-option value="0">全部</el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <SearchButton :default-params="params" @refreshParams="refreshParams" @getList="getList1" />
          </el-form>
        </el-card>
        <el-card shadow="never" class="tableCard">
          <!-- 增删改查按钮放置位置 -->
          <div class="btnList">
            <div class="leftBtn" />
            <div class="rightBtn">
              <el-button type="success" @click="openCompany()">租户母公司维护
              </el-button>
              <el-button type="success" icon="el-icon-plus" @click="openTenement('','0')">添加
              </el-button>
              <el-button type="primary" icon="el-icon-refresh" @click="getRentList()">刷新
              </el-button>
            </div>
          </div>
          <vxe-table
            ref="xTree"
            border
            stripe
            resizable
            highlight-hover-row
            :loading="loading"
            :data="tenementList"
            height="500"
          >
            <vxe-table-column
              tree-node
              field="bunkCode"
              min-width="120"
              title="租户编码"
            />
            <vxe-table-column
              field="houseNumber"
              min-width="120"
              title="租户名称"
            />
            <vxe-table-column
              field="name"
              min-width="140"
              title="主体公司"
            />
            <vxe-table-column
              field="buildName"
              title="联系人"
              min-width="120"
            />
            <vxe-table-column
              field="floorName"
              title="联系电话"
              min-width="120"
            />
            <vxe-table-column
              field="brandName"
              title="经营类目"
              min-width="120"
            />
            <vxe-table-column
              field="insideArea"
              min-width="120"
              title="账号期限"
            />
            <vxe-table-column
              title="操作"
              fixed="right"
              min-width="180"
              slots="default"
            >
              <template slot-scope="scope">
                <label class="linkLable" @click="openTenement(scope.row.id, '1')">查看</label>
                <label class="linkLable" @click="openTenement(scope.row.id, '2')">修改</label>
                <label class="linkLable">删除</label>
                <label class="linkLable">授权</label>
              </template>
            </vxe-table-column>
          </vxe-table>
          <vxe-pager
            :current-page.sync="tableCurrentPage"
            :page-size.sync="pageSize"
            :total="total"
            :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
            @page-change="getRentList()"
          />
        </el-card>
      </el-main>
      <tenementEdit ref="tenementEdit" :parent-id="nowData.id" :disabled="nowData.disabled" />
      <companyInfo ref="companyInfo" :btn-check="true" :operate-check="true" />
    </el-container>
  </div>

</template>

<script>
import SearchButton from '@/components/SearchButton'
import tenementEdit from './components/tenementEdit'
import companyInfo from './components/companyInfo'
export default {
  components: {
    SearchButton,
    tenementEdit,
    companyInfo
  },
  data() {
    return {
      params: {},
      tenementName: '',
      accoutDate: '',
      accountType: 0,
      loading: false,
      tenementList: [
        {
          id: '111',
          bunkCode: '0',
          houseNumber: '1',
          name: '111',
          buildName: '111',
          floorName: '111',
          brandName: '111',
          insideArea: '1111'
        }
      ],
      tableCurrentPage: 1,
      pageSize: 20,
      total: 0,
      nowData: {
        disabled: false
      }
    }
  },
  methods: {
    refreshParams(params) {},
    getList1() {},
    openCompany() {
      this.$refs.companyInfo.companyDialogVisible = true
    },
    openTenement(id, type) {
      if (type !== '0') {
        this.nowData.id = id
        if (type === '1') {
          this.nowData.disabled = true
        } else {
          this.nowData.disabled = false
        }
      }
      this.$refs.tenementEdit.dialogVisible = true
    }
  }
}
</script>

<style lang="scss">
  .tenementAdmin {
    width: 100%;
    .linkLable {
      color: #e84c92;
      font-size: 16px;
      margin-right: 10px;
      cursor: pointer;
    }
  }

</style>
